<template>
	<view class="home">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				客房管家
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}">
			<view class="shang clearfix">
				<view class="name fl">欢迎使用客服助手!</view>
				<view class="name fr">{{roomno}}房间</view>
			</view>
			<view class="xia clearfix">
				<view class="list fl" @click="topage('/pagesA/index/second/charge?qrcode='+qrcode)">
					<image :src="baseUrl + '/wximage/img/xian_nav1.png'" class="bj"></image>
					<view class="nr">
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/img/xian_navwz1.png'" class="fl wenzi"></image>
							<image :src="baseUrl + '/wximage/img/xian_navright.png'" class="fl tubiao"></image>
						</view>
						<view class="desc">共享生活，永不断电</view>
					</view>
				</view>
				<view class="list fl" @click="topage('/pagesA/index/second/shop?qrcode='+qrcode)">
					<image :src="baseUrl + '/wximage/img/xian_nav2.png'" class="bj"></image>
					<view class="nr">
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/img/xian_navwz2.png'" class="fl wenzi"></image>
							<image :src="baseUrl + '/wximage/img/xian_navright.png'" class="fl tubiao"></image>
						</view>
						<view class="desc">欲望之夜，干出爱痕</view>
					</view>
				</view>
				<view class="list fl" @click="call">
					<image :src="baseUrl + '/wximage/img/xian_nav3.png'" class="bj"></image>
					<view class="nr">
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/img/xian_navwz3.png'" class="fl wenzi"></image>
							<image :src="baseUrl + '/wximage/img/xian_navright.png'" class="fl tubiao"></image>
						</view>
						<view class="desc">一键拨打，方便快捷</view>
					</view>
				</view>
				<view class="list fl" @click="topage('/pagesA/index/second/wifi')">
					<image :src="baseUrl + '/wximage/img/xian_nav4.png'" class="bj"></image>
					<view class="nr">
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/img/xian_navwz4.png'" class="fl wenzi"></image>
							<image :src="baseUrl + '/wximage/img/xian_navright.png'" class="fl tubiao"></image>
						</view>
						<view class="desc">一键连接，流量无忧</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view class="headtop">
			<view class="shang clearfix">
				<view class="name fl">欢迎使用客服助手!</view>
				<view class="name fr">{{roomno}}房间</view>
			</view>
			<view class="xia clearfix">
				<view class="list fl" @click="topage('/pagesA/index/second/charge?qrcode='+qrcode)">
					<image :src="baseUrl + '/wximage/img/xian_nav1.png'" class="bj"></image>
					<view class="nr">
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/img/xian_navwz1.png'" class="fl wenzi"></image>
							<image :src="baseUrl + '/wximage/img/xian_navright.png'" class="fl tubiao"></image>
						</view>
						<view class="desc">共享生活，永不断电</view>
					</view>
				</view>
				<view class="list fl" @click="topage('/pagesA/index/second/shop?qrcode='+qrcode)">
					<image :src="baseUrl + '/wximage/img/xian_nav2.png'" class="bj"></image>
					<view class="nr">
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/img/xian_navwz2.png'" class="fl wenzi"></image>
							<image :src="baseUrl + '/wximage/img/xian_navright.png'" class="fl tubiao"></image>
						</view>
						<view class="desc">欲望之夜，干出爱痕</view>
					</view>
				</view>
				<view class="list fl" @click="call">
					<image :src="baseUrl + '/wximage/img/xian_nav3.png'" class="bj"></image>
					<view class="nr">
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/img/xian_navwz3.png'" class="fl wenzi"></image>
							<image :src="baseUrl + '/wximage/img/xian_navright.png'" class="fl tubiao"></image>
						</view>
						<view class="desc">一键拨打，方便快捷</view>
					</view>
				</view>
				<view class="list fl" @click="topage('/pagesA/index/second/wifi')">
					<image :src="baseUrl + '/wximage/img/xian_nav4.png'" class="bj"></image>
					<view class="nr">
						<view class="top clearfix">
							<image :src="baseUrl + '/wximage/img/xian_navwz4.png'" class="fl wenzi"></image>
							<image :src="baseUrl + '/wximage/img/xian_navright.png'" class="fl tubiao"></image>
						</view>
						<view class="desc">一键连接，流量无忧</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		<view class="bottombody">
			<view class="fenlei clearfix">
				<view class="li fl">
					<image :src="baseUrl + '/wximage/img/xian_fenlei1.png'"></image>
					<view class="title">预约发票</view>
				</view>
				<view class="li fl">
					<image :src="baseUrl + '/wximage/img/xian_fenlei2.png'"></image>
					<view class="title">酒店超市</view>
				</view>
				<view class="li fl">
					<image :src="baseUrl + '/wximage/img/xian_fenlei3.png'"></image>
					<view class="title">好评有礼</view>
				</view>
				<view class="li fl">
					<image :src="baseUrl + '/wximage/img/xian_fenlei4.png'"></image>
					<view class="title">睡眠解压</view>
				</view>
			</view>
			<view class="zhoubian clearfix">
				<view class="shuxian fl"></view>
				<view class="name fl">周边服务</view>
			</view>
			<view class="fenleis clearfix">
				<view class="li fl" @click="onRecite('zuche')">
					<image :src="baseUrl + '/wximage/img/xian_fenlei5.png'"></image>
					<view class="title">租车</view>
				</view>
				<view class="li fl" @click="onRecite('huoche')">
					<image :src="baseUrl + '/wximage/img/xian_fenlei6.png'"></image>
					<view class="title">火车票</view>
				</view>
				<view class="li fl" @click="onRecite('feiji')">
					<image :src="baseUrl + '/wximage/img/xian_fenlei7.png'"></image>
					<view class="title">飞机票</view>
				</view>
				<view class="li fl" @click="onRecite('qiche')">
					<image :src="baseUrl + '/wximage/img/xian_fenlei8.png'"></image>
					<view class="title">汽车票</view>
				</view>
			</view>
			<view class="daohang clearfix">
				<view class="left fl">
					<image :src="baseUrl + '/wximage/img/xian_fenlei9.png'"></image>
				</view>
				<view class="right fr">
					<image :src="baseUrl + '/wximage/img/xian_fenlei10.png'" class="topimage"></image>
					<view class="bottomimg clearfix">
						<image :src="baseUrl + '/wximage/img/xian_fenlei11.png'" class="fl"></image>
						<image :src="baseUrl + '/wximage/img/xian_fenlei12.png'" class="fr"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				qrcode: '',
				roomno: '',
				phone: '',
			}
		},
		onLoad(options) {
			this.qrcode = options.qrcode;
			
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}

			// #ifdef MP-ALIPAY
			my.setNavigationBar({
				frontColor: '#ffffff',
				backgroundColor: '#b7effc',
			})
			// 设置导航栏标题
			my.setNavigationBar({
				title: '客房管家'
			})
			// #endif
			
			// 设备/房间/电话信息
			this.request({
				url: '/wxdevice/lineinfo',
				data: {
					qrcode: this.qrcode
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.roomno = res.data.data.device.roomno;
					this.phone = res.data.data.station.phone;
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			});
		},
		methods: {
			onRecite(type){
				var userid = uni.getStorageSync('user_id');
				//判断一下是否登录了账号
				if(userid == ''||userid == null){
					console.log("用户未登录");
					return false;
				}
				//打车
				if(type=='zuche'){
					 uni.navigateTo({
					    url: "plugin://meishi/shop?pub_id=4525&type=didi&sid="+userid
					  });
				}
				
				
			},
			
			call(){
				let phone = this.phone;
				
				uni.makePhoneCall({
					phoneNumber: phone,
					success() {
				
					}
				})
			},
			fanhui(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		margin: 0 auto;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #b7eeff, #defaee);
		
			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
				box-sizing: border-box;
			}
			
			.iconfont {
				position: absolute;
				top: 0;
				left: 14rpx;
				font-size: 44rpx;
			}
		}
		
		.headtop {
			background: linear-gradient(90deg, #b7eeff, #defaee);
			width: 100%;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			height: 540rpx;
			
			.shang{
				width: 100%;
				
				.name{
					font-size: 28rpx;
					color: #333333;
				}
			}
			
			.xia{
				margin-top: 20rpx;
				width: 100%;
				
				.list{
					width: 326rpx;
					height: 180rpx;
					position: relative;
					margin-right: 18rpx;
					margin-bottom: 18rpx;
					
					.bj{
						width: 100%;
						height: 100%;
					}
					
					.nr{
						position: absolute;
						top: 36rpx;
						left: 38rpx;
						
						.top{
							
							.wenzi{
								width: 122rpx;
								height: 28rpx;
								margin-right: 6rpx;
							}
							
							.tubiao{
								width: 24rpx;
								height: 24rpx;
								margin-top: 2rpx;
							}
						}
						
						.desc{
							font-size: 20rpx;
							color: #999999;
							margin-top: 16rpx;
						}
					}
				}
				
				.list:nth-of-type(2n){
					margin-right: 0;
				}
			}
		}
		
		.bottombody{
			width: 100%;
			background: linear-gradient(to bottom, #F8FEFF, #ffffff);
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			padding: 30rpx 40rpx 140rpx;
			margin-top: -60rpx;
			
			.fenlei {
				width: 100%;
				margin: 0 auto;
		
				.li {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					margin-bottom: 20rpx;
		
					.title {
						float: left;
						font-size: 28rpx;
						color: #333333;
					}
		
					image {
						float: left;
						width: 100rpx;
						height: 100rpx;
						margin-left: 40rpx;
						margin-right: 20rpx;
					}
				}
			}
			
			.zhoubian{
				margin-top: 10rpx;
				height: 32rpx;
				line-height: 32rpx;
				
				.shuxian{
					width: 6rpx;
					height: 32rpx;
					background: #50CFE8;
					margin-right: 14rpx;
				}
				
				.name{
					font-size: 32rpx;
					color: #333333;
					font-weight: 700;
				}
			}
			
			.fenleis {
				width: 100%;
				margin: 0 auto;
				margin-top: 40rpx;
					
				.li {
					width: 25%;
					text-align: center;
					
					.title {
						font-size: 28rpx;
						color: #333333;
						font-weight: 700;
						margin-top: -10rpx;
					}
					
					image {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
			
			.daohang{
				width: 100%;
				margin: 0 auto;
				margin-top: 40rpx;
				
				.left{
					
					image{
						width: 326rpx;
						height: 268rpx;
						display: flex;
					}
				}
				
				.right{
					
					.topimage{
						width: 326rpx;
						height: 124rpx;
						margin-bottom: 18rpx;
						display: flex;
					}
					
					.bottomimg{
						
						image{
							width: 154rpx;
							height: 124rpx;
							display: flex;
						}
					}
				}
			}
		}
	}
</style>